<template>
  <div>
    <div id="webgl" style="margin-top: 200px;margin-left: 100px;"></div>
    <div id="tooltip">...</div>
  </div>
</template>

<script>
import * as THREE from "three";
// 引入相机控件 实现旋转缩放预览效果 （改变相机的位置、角度、缩放）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import { CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
console.log("three", THREE);

export default {
  mounted() {
    console.log("mounted");
    // 创建3D场景对象Scene
    const scene = new THREE.Scene();
    // scene.background = new THREE.Color(0xFF0000);
    console.log("scene", scene);
    // 给场景加物体

    // 定制形状：长方体 width height depth【深度】
    const geometry = new THREE.BoxGeometry(100, 110, 20);
    // 材质：颜色
    const material = new THREE.MeshBasicMaterial({
      color: 0xffa500, //设置材质颜色
      transparent: true, //开启透明
      opacity: 0.5 //设置透明度
    });
    // 创建一个网格模型，用于表示生活中的物体
    const mesh = new THREE.Mesh(geometry, material);
    console.log("mesh", mesh);

    // 定义物体（即网格模型）在场景中的位置
    mesh.position.set(50, 0, 10);
    // 将物体放到场景中
    scene.add(mesh);
    //  总：以上是一个完整的三维场景
    // PerspectiveCamera 本质是在模拟人眼观察这个世界的规律
    // 实例化一个透视投影相机对象 视野角度300，宽高比600/600，近裁面1，远裁面1000
    const camera = new THREE.PerspectiveCamera(30, 800 / 500, 0.1, 3000);
    // 设置相机的位置
    camera.position.set(500, 100, 10);
    // 相机的视线，观察目标点的位置 指向网格模型
    camera.lookAt(mesh.position); // 默认是(0,0,0)原点
    // 添加三维坐标轴
    const axis = new THREE.AxesHelper(120);
    axis.setColors(0xff0000, 0x00ff00, 0x0000ff);
    // 将坐标轴添加到场景中，方便观察方向
    scene.add(axis);
    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(800, 500); //设置three.js渲染区域的尺寸(像素px)
    renderer.render(scene, camera); //执行渲染操作
    document.getElementById("webgl").appendChild(renderer.domElement);
    console.log("renderer", renderer);

    // 2.
    // 设置相机控件轨道控制器OrbitControls camera 改变相机的参数 变化了需要重新渲染画布
    const controls = new OrbitControls(camera, renderer.domElement);
   



// 创建一个 div 元素作为标签
    // 【创建标记点】
const markerGeometry = new THREE.SphereGeometry(5, 8, 8);
const markerMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const marker = new THREE.Mesh(markerGeometry, markerMaterial);
marker.position.set(50, 0, 0); // x轴正方向末端
mesh.add(marker);

// 【创建标签】
const labelDiv = document.createElement('div');
labelDiv.className = 'label';
labelDiv.textContent = 'X轴端点';
labelDiv.style.color = 'white';
labelDiv.style.backgroundColor = 'rgba(0,0,0,0.6)';
labelDiv.style.padding = '4px 8px';
labelDiv.style.borderRadius = '4px';
labelDiv.style.fontSize = '12px';

      // 包装为 CSS2DObject
      const label = new CSS2DObject(labelDiv);
      label.position.set(50, 10, 0); // 设置相对于 mesh 的位置  标签略高于标记点
      mesh.add(label); // 添加到 mesh 上，跟随 mesh 移动
      // 创建 CSS2DRenderer 实例
      const css2dRenderer = new CSS2DRenderer();
      css2dRenderer.setSize(800, 500);
      css2dRenderer.domElement.style.position = 'absolute';
      css2dRenderer.domElement.style.top = '0px';
      css2dRenderer.domElement.style.pointerEvents = 'none'; // 不影响鼠标事件
      document.getElementById("webgl").appendChild(css2dRenderer.domElement);
    //  渲染循环
  
// 【设置 Raycaster】
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
// 【创建提示框元素】
const tooltip = document.createElement('div');
tooltip.id = 'tooltip';
tooltip.style.cssText = `
  position: absolute;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1000;
  display: none;
`;
document.body.appendChild(tooltip);
// 【添加点击事件】
renderer.domElement.addEventListener('click', (event) => {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    const hitObject = intersects[0].object;
    console.log('点击了:', hitObject.name || hitObject.type);

    if (hitObject === marker) {
        // 显示提示框
      tooltip.textContent = '您点击了 X 轴端点！';
      tooltip.style.display = 'block';

      // 定位到鼠标位置偏移一点
      const rect = renderer.domElement.getBoundingClientRect();
      tooltip.style.left = `${event.clientX + 10}px`;
      tooltip.style.top = `${event.clientY - 30}px`;

      // 1.5秒后隐藏
      setTimeout(() => {
        tooltip.style.display = 'none';
      }, 1500);
    }
  }
});


      // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    controls.addEventListener("change", function(e) {
      console.log("e", e);
      renderer.render(scene, camera); //执行渲染操作
      css2dRenderer.render(scene, camera);  // 渲染 CSS2D 内容
    }); //监听鼠标、键盘事件
     function render() {

      mesh.rotateY(0.1);
      renderer.render(scene, camera); //执行渲染操作
       css2dRenderer.render(scene, camera);  // 渲染 CSS2D 内容
      requestAnimationFrame(render);
    }
    // render()
  },
  methods: {
    shwoEl(){
      
    },
    elRender(){

    }
  }
};
</script>

<style  >
 #tooltip {
  position: absolute;
  background: rgba(199, 96, 96, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 1000;
  display: none;
}
</style>